<template>
  <div>
    <el-row>
      <div class="item">
        <el-select v-model="provinceValue" placeholder="省/直辖市" @change="selectProvimce">
          <el-option v-for="(item, index) of provincearr" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <el-select v-model="cityValue" placeholder="市" @change="selectcity">
          <el-option v-for="(item, index) of cityarr" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div v-if="mode[2] === 1" class="item">
        <!--<span class="other_title">区</span>-->
        <el-select placeholder="区/县" v-model="regionValue">
          <el-option v-for="(item, index) of regionarr" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
    </el-row>
  </div>
</template>

<script>
import { listRegion } from '@/api'
export default {
  name: 'SelectAddress',
  props: {
    mode: {
      type: Array,
      default: () => [1, 1, 1],
    },
    value: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      arr: [1, 3, 4],
      province: [],
      cityarr: [],
      regionarr: [],
      provincearr: [],
      provinceValue: '',
      cityValue: '',
      regionValue: '',
      searchMap: {
        pid: 0,
      },
    }
  },
  created () {
    this.initCityData()
  },
  mounted () { },
  watch: {
    regionValue (val) {
      const { provinceValue, cityValue } = this
      this.$emit('change', { p: provinceValue, c: cityValue, a: val })
    },
    value: {
      immediate: true,
      handler (str) {
        console.log(str)
        if (typeof str  === 'string') {
          const [p, c, a] = str.split('/')
          this.provinceValue = p
          this.cityValue = c
          this.regionValue = a
        }
      },
    },
  },
  methods: {
    initCityData () {
      listRegion(this.searchMap).then((res) => {
        const data = res.data
        data.map((item) => {
          this.provincearr.push({
            leaf: item.leaf,
            pid: item.pid,
            id: item.regionId,
            name: item.name,
          })
        })
      })
    },
    selectProvimce (pid) {
      this.searchMap.pid = pid
      listRegion(this.searchMap).then((res) => {
        const data = res.data
        const city = data.map((item) => {
          return {
            leaf: item.leaf,
            pid: item.pid,
            id: item.regionId,
            name: item.name,
          }
        })
        this.cityarr = city
      })
      this.regionarr = []
      this.cityValue = ''
      this.regionValue = ''
    },
    selectcity (pid) {
      this.searchMap.pid = pid
      listRegion(this.searchMap).then((res) => {
        const data = res.data
        const region = data.map((item) => {
          return {
            leaf: item.leaf,
            pid: item.pid,
            id: item.regionId,
            name: item.name,
          }
        })
        this.regionarr = region
      })
      if (this.mode[2] !== 1) {
        this.$emit('change', { p: provinceValue, c: cityValue, a: '' })
      }
    },
  },
}
</script>
<style scoped lang="less">
.el-row {
  display: flex;
}

.item {
  display: flex;
  span {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    width: 50px;
  }

  ::v-deep {
    .el-input {
      border-radius: 5px;
      overflow: hidden;
    }
    .el-input__inner {
      width: 130px;
      height: 32px;
      border: 0;
      background-color: #fff;
    }

    .el-input__suffix {
      display: flex;
      align-items: center;
    }
  }

  &:nth-of-type(n + 2) {
    margin-left: 10px;
  }
}
</style>
